<template>
  <div class="all">
    <div class="bottom">
      <div class="bottom-top">
        <div class="bottom-top-left1">
          <div class="bottom-top-left">
            <el-button-group>
              <el-button type="primary" class="next">上一周</el-button>
              <el-button type="primary">本周</el-button>
              <el-button type="primary" class="last">下一周</el-button>
            </el-button-group>
          </div>
        </div>

        <div class="bottom-top-right">
          <div class="offices">
            <el-dropdown>
              <span class="el-dropdown-link">
                请选择科室<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      内科<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>消化内科 </el-dropdown-item>
                      <el-dropdown-item>血液内科</el-dropdown-item>
                      <el-dropdown-item>风湿免疫内科</el-dropdown-item>
                      <el-dropdown-item>肾内科</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      外科<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>消化外科 </el-dropdown-item>
                      <el-dropdown-item>血液外科</el-dropdown-item>
                      <el-dropdown-item>风湿免疫外科</el-dropdown-item>
                      <el-dropdown-item>肾外科</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="name">
            <input type="text" placeholder="请输入病人姓名" /><button>
              搜索
            </button>
          </div>
        </div>
      </div>
      <div class="bottom2">
        <div class="bottom2-top">
          <div class="bottom2-top2">
            <table>
              <tr class="qian">
                <td rowspan="2" colspan="2">医生姓名</td>
                <td rowspan="2" colspan="2">科室</td>
                <td colspan="2">2021/01/01 星期一</td>
                <td colspan="2">2021/01/02 星期二</td>
                <td colspan="2">2021/01/03 星期三</td>
                <td colspan="2">2021/01/04 星期四</td>
                <td colspan="2">2021/01/05 星期五</td>
                <td colspan="2">2021/01/06 星期六</td>
                <td colspan="2">2021/01/07 星期日</td>
                <td rowspan="2">操作</td>
              </tr>
              <tr class="qian">
                <td class="no">上午</td>
                <td>下午</td>
                <td>上午</td>
                <td>下午</td>
                <td>上午</td>
                <td>下午</td>
                <td>上午</td>
                <td>下午</td>
                <td>上午</td>
                <td>下午</td>
                <td>上午</td>
                <td>下午</td>
                <td>上午</td>
                <td>下午</td>
              </tr>
            </table>
            <table class="two">
              <tr v-for="(num, index) in 10" :key="index">
                <td colspan="2">赵马</td>
                <td colspan="2">内科-心脏内科</td>
                <td><span>10</span>/20</td>
                <td class="qian">休</td>
                <td><span>10</span>/20</td>
                <td class="qian">休</td>
                <td><span>10</span>/20</td>
                <td><span>10</span>/20</td>
                <td><span>10</span>/20</td>
                <td class="qian">休</td>
                <td><span>10</span>/20</td>
                <td class="qian">休</td>
                <td class="qian">休</td>
                <td><span>10</span>/20</td>
                <td class="qian">休</td>
                <td class="qian">休</td>
                <td><img src="../../../img/Booking/docoter.svg" alt="" /></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="bottom3">
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
};
</script>
<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
};
</script>
<script>
export default {
  name: "GoodsList",
  props: ["goods"],
  data() {
    return {
      bianli: [
        {
          name: "赵马",
          CardNumber: 5000909000,
          IDnumber: 371890199507070909,
          telephone: 15678900988,
          Department: "内科-肾内科",
          type: "专家号",
          fee: "60.00",
          status: "已就诊",
          Visit: "2019-08-15",
          Waiting: "9:30",
          appointment: "2019-08-15 14:02:26",
        },
        {
          name: "赵马",
          CardNumber: 5000909000,
          IDnumber: 371890199507070909,
          telephone: 15678900988,
          Department: "内科-肾内科",
          type: "专家号",
          fee: "60.00",
          status: "已就诊",
          Visit: "2019-08-15",
          Waiting: "9:30",
          appointment: "2019-08-15 14:02:26",
        },
        {
          name: "赵马",
          CardNumber: 5000909000,
          IDnumber: 371890199507070909,
          telephone: 15678900988,
          Department: "内科-肾内科",
          type: "专家号",
          fee: "60.00",
          status: "已就诊",
          Visit: "2019-08-15",
          Waiting: "9:30",
          appointment: "2019-08-15 14:02:26",
        },
        {
          name: "赵马",
          CardNumber: 5000909000,
          IDnumber: 371890199507070909,
          telephone: 15678900988,
          Department: "内科-肾内科",
          type: "专家号",
          fee: "60.00",
          status: "已就诊",
          Visit: "2019-08-15",
          Waiting: "9:30",
          appointment: "2019-08-15 14:02:26",
        },
        {
          name: "赵马",
          CardNumber: 5000909000,
          IDnumber: 371890199507070909,
          telephone: 15678900988,
          Department: "内科-肾内科",
          type: "专家号",
          fee: "60.00",
          status: "已就诊",
          Visit: "2019-08-15",
          Waiting: "9:30",
          appointment: "2019-08-15 14:02:26",
        },
      ],
    };
  },
  methods: {
    sendToApp() {
      this.$bus.$emit("busHandler", { name: "zhangsan", age: 18 });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.bottom2-top2 {
  margin-bottom: 20px;
}

.qian {
  color: #999999;
}

.el-dropdown {
  padding-left: 35px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.all {
  height: 100%;
  color: #333333;
  background-color: #f3f8ff;
}

.top {
  display: flex;
  height: 90px;
  /* border: 1px solid red; */
}

.top-left,
.top-right {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: justify;
  /* width:100%;
  height: 200px; */
  /* border: 1px solid red; */
}

.top-right {
  margin-left: 865px;
}

.prefix {
  width: 24px;
  height: 8px;
  background: inherit;
  background-color: inherit;
  background-color: rgba(0, 110, 255, 1);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-size: 16px;
  color: #006eff;
  margin-right: 20px;
}

.text {
  font-family: "PingFangHK-Regular", "PingFang HK", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  letter-spacing: 1px;
  white-space: nowrap;
  text-transform: none;
  color: #333333;
}

.in,
.out {
  text-align: center;
  text-transform: none;
  font-size: 14px;
  width: 80px;
  height: 40px;
  background: inherit;
  background-color: inherit;
  background-color: rgba(0, 110, 255, 0.0980392156862745);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  color: #006eff;
  line-height: 20px;
}

.in:hover,
.out:hover {
  color: aliceblue;
  background-color: #006eff;
}

.in {
  margin-right: 20px;
}

.bottom {
  background-color: white;
  width: 1150px;
  height: 781px;
  margin: 0 auto;
  padding: 20px;
}

.bottom-top {
  position: relative;
  margin-bottom: 20px;
}

.bottom-top-left1 {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 10px;
}

.bottom-top-left {
  display: flex;
  padding-top: 20px;
}

.bottom-top {
  height: 70px;
  width: 100%;
  /* border: 1px solid red; */
}

.other {
  display: inline-block;
  display: flex;
  font-size: 14px;
  text-align: left;
  line-height: 24px;
}

.other img {
  display: block;
}

.other span {
  padding: 0 10px 0 15px;
}

.bottom2-top img,
.bottom2-top .fl {
  display: inline-block;
}

.bottom-top-right {
  position: absolute;
  top: 20px;
  right: 0;
}

.time,
.bottom-top-right,
.block,
.offices {
  display: inline-block;
  margin-right: 10px;
}

.block {
  margin: 0 10px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 140px;
}

.offices {
  position: relative;
  border: 1px solid #e8f2ff;
  width: 160px;
  height: 30px;
  padding-top: 10px;
}

.name {
  display: inline-block;
}

.name input {
  width: 320px;
  height: 40px;
  padding-left: 20px;
  border: 1px solid #e8f2ff;
}

.name button {
  width: 64px;
  height: 40px;
  margin-left: 10px;
  background: inherit;
  background-color: inherit;
  background-color: rgba(0, 110, 255, 1);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  color: #ffffff;
  line-height: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.grid-content {
  font-size: 12px;
  color: #999999;
  line-height: 36px;
  text-align: center;
}

.bottom3 .block {
  display: flex;
  justify-content: center;
}

.change {
  width: 16px;
  height: 20px;
}

.more {
  margin-bottom: 20px;
}

.next,
.last {
  background-color: white;
  color: #409eff;
  border: 1px solid #006eff;
}

table {
  margin: 0 auto;
}

table {
  border-collapse: collapse;
}

td {
  border-collapse: collapse;
  border: 1px solid #e8f2ff;
  width: 60px;
  height: 32px;
  text-align: center;
  font-size: 12px;
}

td:first-child {
  color: #006eff;
}

.no {
  color: black !important;
}

td span {
  color: red;
}

td img {
  width: 50px;
}</style>
